import {exeControlCommand} from '@/api/setting'
import {CCard} from '@/components/card'
import {IconImg} from '@/components/images'
import {View, Switch, RootPortal, Button, Image} from '@tarojs/components'
import Taro from '@tarojs/taro'
import {useState} from 'react'
// import { AtForm, AtSwitch } from 'taro-ui'
// import btnControll from './btnControlls'
import './btnControlls.scss'

export const ControllBtn: React.FC<{controll: Setting.DevControll}> = ({
  controll,
  children,
  rainwaterChecked,
  setRainwaterCheckedFunc,
  sewageChecked,
  setRainwaterChecked,
  setSewageChecked,
  setOneSwitchStatus,
  oneSwichStatus,
  oneOrTwoSwitch,
  isSwitchOrBtn,
  isOnlyOpenCardState,
  onlyOpenCardClick
}): JSX.Element => {
  enum ControllImgNameMap {
    '0210' = 'devControll-read',
    '0211' = 'devControll-write',
    '0212' = 'devControll-turnOn',
    '0213' = 'devControll-turnOff'
  }

  function handleControllBtnClick() {
    console.log(isSwitchOrBtn)
    //
    if (isSwitchOrBtn) {
      switch (controll.controlCode) {
        case '0213':
          Taro.showModal({
            title: '确认是否关闭',
            success(res) {
              console.log('close success', res)
              if (res.confirm) {
                runControll()
              }
            }
          })
          break
        case '0210':
        case '0211':
        case '0212':
        default:
          runControll()
          break
      }
    } else {
      console.log('按钮')
    }
  }

  function runControll() {
    if (controll.funName != '雨水控制' && controll.funName != '污水控制') {
      // Taro.showLoading({
      //   title: '执行中...'
      // })
      // setTimeout(() => {
      //   Taro.hideLoading()
      // }, 1000)
      exeControlCommand({controlId: controll.controlId})
        .then(res => {
          Taro.hideLoading()
          if (res.msg) {
            Taro.showModal({
              content: res.msg
            })
          }
        })
        .catch(err => {
          if (err && err.msg) {
            Taro.showModal({
              content: err.msg
            })
          }
          Taro.hideLoading()
        })
    } else {
      // Taro.showLoading({
      //   title: '执行中...'
      // })
      // setTimeout(()=>{
      //   Taro.hideLoading()
      // },2000)
    }
  }

  // const [rainwaterChecked,setRainwaterChecked] = useState(true)

  // let rainwaterChecked = true

  // function switchChange(){
  //   // let checked = !rainwaterChecked
  //   // setRainwaterChecked(checked)

  //   Taro.showLoading({
  //     title: '执行中'
  //   })
  //   // Taro.showLoading({
  //   //   title: '正在关闭'
  //   // })
  //   setTimeout(()=>{
  //     Taro.hideLoading()
  //   },2000)
  //   console.log(11111);

  // }

  // 开关的开关事件函数
  function switchChange() {
    Taro.showModal({
      title: '提示',
      content: `确定要关闭${rainwaterChecked ? '雨水' : '污水'}控制并且开启${
        rainwaterChecked ? '污水' : '雨水'
      }控制吗？`,
      success(result) {
        if (result.confirm) {
          setRainwaterCheckedFunc()
        } else if (result.cancel) {
          /* 先取反，触发页面render渲染函数，然后再将 */
          setRainwaterChecked(!rainwaterChecked)
          setSewageChecked(!sewageChecked)
          setRainwaterChecked(rainwaterChecked)
          setSewageChecked(sewageChecked)
        }
      }
    })
  }

  // 弹窗取消事件函数
  function modelCancel() {
    showTwoSwitchFunc()
  }

  function showTwoSwitchFunc() {
    let reSwitch = <></>
    // if(controll.funName=="雨水控制" && rainwaterChecked){
    //   re = showSwitchTrue()
    // }else if(controll.funName=="雨水控制" && !rainwaterChecked){
    //   re = showSwitchFalse()
    // } else if(controll.funName=="污水控制" && rainwaterChecked){
    //   re = showSwitchFalse()
    // }else{
    //   re = showSwitchTrue()
    // }

    if (controll.funName == '雨水控制' && rainwaterChecked && !sewageChecked) {
      reSwitch = showSwitchTrue()
    } else if (
      controll.funName == '雨水控制' &&
      !rainwaterChecked &&
      sewageChecked
    ) {
      reSwitch = showSwitchFalse()
    } else if (
      controll.funName == '污水控制' &&
      !rainwaterChecked &&
      sewageChecked
    ) {
      reSwitch = showSwitchTrue()
    } else if (
      controll.funName == '污水控制' &&
      rainwaterChecked &&
      !sewageChecked
    ) {
      reSwitch = showSwitchFalse()
    } else if (
      controll.funName == '雨水控制' &&
      rainwaterChecked &&
      sewageChecked
    ) {
      reSwitch = showSwitchTrue()
    } else if (
      controll.funName == '污水控制' &&
      rainwaterChecked &&
      sewageChecked
    ) {
      reSwitch = showSwitchTrue()
    } else if (
      controll.funName == '雨水控制' &&
      !rainwaterChecked &&
      !sewageChecked
    ) {
      reSwitch = showSwitchFalse()
    } else if (
      controll.funName == '污水控制' &&
      !rainwaterChecked &&
      !sewageChecked
    ) {
      reSwitch = showSwitchFalse()
    }
    return reSwitch
  }

  function showSwitchTrue() {
    return (
      <Switch
        className="statusSwitch rainwaterOrSewage"
        onChange={switchChange}
        style={{width: '40px', height: '20px'}}
        checked
      />
    )
  }
  function showSwitchFalse() {
    return (
      <Switch
        className="statusSwitch rainwaterOrSewage"
        onChange={switchChange}
        style={{width: '40px', height: '20px'}}
      />
    )
  }

  function showOneSwitchFunc() {
    console.log(oneSwichStatus)

    if (oneSwichStatus) {
      return (
        <View>
          <Switch
            className="statusSwitch rainwaterOrSewage"
            onChange={switchOneChange}
            style={{width: '40px', height: '20px'}}
            checked
          />
        </View>
      )
    } else {
      return (
        <View>
          <Switch
            className="statusSwitch rainwaterOrSewage"
            onChange={switchOneChange}
            style={{width: '40px', height: '20px'}}
          />
        </View>
      )
    }
  }

  function switchOneChange(e) {
    console.log(e)
    setOneSwitchStatus(!oneSwichStatus)
    setRainwaterCheckedFunc()
    // setOneSwitchStatus(!oneSwichStatus)
  }

  function showBtnFunc() {
    return (
      <button
        onClick={() => {
          onlyOpenCardClick(controll)
        }}
      >
        <Image
          className="qd_img"
          src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/yqd.png"
        ></Image>
        {/* <Image
          className="qd_img"
          src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/dqd.png"
        ></Image> */}
        启动
        {/* <div className="svg-wrapper-1"></div>
        <span>Send</span> */}
      </button>
    )
  }

  return (
    <CCard onClick={handleControllBtnClick} style={{position: 'relative'}}>
      {children
        ? children
        : [
            <View>
              <IconImg
                imgName={ControllImgNameMap[controll.controlCode]}
              ></IconImg>
            </View>,

            <View className="hanzi text-14 font-bold mb-2 truncate">
              {controll.funName}
              {/* 氨氮 */}
            </View>,
            // <View className="hanzi text-14 text-xx_text truncate">
            //   {controll.controlDesc}
            // </View>

            // <View>{isSwitchOrBtn.toString()}</View>,
            <View>
              {/* { oneOrTwoSwitch ? showOneSwitchFunc() : showTwoSwitchFunc()} */}
              {isSwitchOrBtn
                ? oneOrTwoSwitch
                  ? showOneSwitchFunc()
                  : showTwoSwitchFunc()
                : showBtnFunc()}
            </View>
          ]}
    </CCard>
  )
}
